<template>
  <div class="title yellow_title">联系方式</div>
  <div class="ful">
    <div class="left">联系人</div>
    <input
      type="text"
      v-model="formName"
      class="right right_input"
      placeholder="请输入联系人姓名"
      @input="changeName"
    />
  </div>
  <div class="ful">
    <div class="left">电话号码</div>
    <input
      v-model="formPhone"
      type="number"
      class="right right_input"
      placeholder="请输入联系人手机号"
      @input="changePhone"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  contactName: String,
  phone: Number,
});
const emit = defineEmits(["update:contactName", "update:phone"]);

const formName = ref("");
const formPhone = ref("");

onMounted(() => {
  formName.value = props.contactName;
  formPhone.value = props.phone;
});

const changeName = (e) => {
  emit("update:contactName", e.target.value);
};
const changePhone = (e) => {
  emit("update:phone", e.target.value);
};
</script>
